<template>
  <div class="info">
    <h1>发热趋势图</h1>
    <div class="block">
      <span>时间：</span>
      <el-date-picker v-model="pickerValue"
                      type="daterange"
                      align="right"
                      unlink-panels
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                      :picker-options="pickerOptions"
                      format="yyyy-MM-dd"
                      @change="hanldePickerChange">
      </el-date-picker>
      <span class="label">发热温度：</span>
      <el-input-number :min="30"
                       :max="50"
                       :step="0.1"
                       @change="handleThresholdChange"
                       v-model="temperatureThreshold"
                       controls-position="right"
                       placeholder="发热温度阈值" />
    </div>
    <TrendChart style="width: 100%;height: 400px;"
                :chartData="chartData"></TrendChart>
  </div>
</template>

<script>
import TrendChart from './TrendChart.vue'
import moment from 'moment'
import axios from '../axios.js'
import store from '../store'
export default {
  name: 'TemperatureTrend',
  components: {
    TrendChart,
  },
  data () {
    return {
      chartData: [],
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            },
          },
          {
            text: '最近一个月',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            },
          },
          {
            text: '最近三个月',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            },
          },
        ],
      },
      pickerValue: [
        new Date(
          moment(new Date(new Date().getTime() - 3600 * 1000 * 24 * 30)).format(
            'YYYY-MM-DD 00:00:00'
          )
        ),
        new Date(moment(new Date()).format('YYYY-MM-DD 00:00:00')),
      ],
      temperatureThreshold: 37.2,
    }
  },
  watch: {
    keyUser: {
      handler (newKeyUser) {
        console.log(newKeyUser)
        this.updateChart()
      },
    },
  },
  methods: {
    getTrendData () {
      axios.getTrendData(store.state.username,
        this.pickerValue[0].toISOString(),
        this.pickerValue[1].toISOString(),
        this.temperatureThreshold)
        .then((res) => {
          console.log(res)
          this.updateChart(res.data)
        })
    },
    hanldePickerChange (value) {
      console.log(value)
      this.getTrendData()
    },
    handleThresholdChange (value) {
      console.log(value)
      this.getTrendData()
    },
    updateChart (resData) {
      console.log(resData)
      this.chartData.splice(0, this.chartData.length) // 清空
      if (resData.status == 0) {
        let arrData = resData.data

        if (arrData.length > 0) {
          let sDateTime = new Date(this.pickerValue[0]).getTime()
          let eDateTime = new Date(arrData[0][0]).getTime()
          let time = sDateTime + 24 * 60 * 60 * 1000
          for (; time < eDateTime; time += 24 * 60 * 60 * 1000) {
            this.chartData.push([new Date(time), 0])
          }
        }

        for (let i = 0; i < arrData.length; ++i) {
          this.chartData.push([new Date(arrData[i][0]), arrData[i][1]])
          if (i + 1 < arrData.length) {
            let sDateTime = new Date(arrData[i][0]).getTime()
            let eDateTime = new Date(arrData[i + 1][0]).getTime()
            let time = sDateTime + 24 * 60 * 60 * 1000
            for (; time < eDateTime; time += 24 * 60 * 60 * 1000) {
              this.chartData.push([new Date(time), 0])
            }
          }
        }

        if (arrData.length > 0) {
          let sDateTime = new Date(arrData[arrData.length - 1][0]).getTime()
          let eDateTime =
            new Date(this.pickerValue[1]).getTime() + 24 * 60 * 60 * 1000
          let time = sDateTime + 24 * 60 * 60 * 1000
          for (; time <= eDateTime; time += 24 * 60 * 60 * 1000) {
            this.chartData.push([new Date(time), 0])
          }
        }
      }

      console.log(JSON.stringify(this.chartData))
    },
  },
  created () {
    this.getTrendData()
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1 {
  font-size: 30px;
  color: #333;
  text-align: center;
  margin: 0 auto;
  padding-bottom: 5px;
  border-bottom: 2px solid #409eff;
  width: 220px;
}
.block {
  margin-top: 20px;
  margin-left: 100px;
}

.label {
  margin-left: 20px;
}
</style>
